import React from "react"
import { Remarkable } from 'remarkable';

class MarkdownEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "### hello"
    }
    this.md = new Remarkable()
  }

  getRawMarkup() {
    return {
      __html: this.md.render(this.state.value)
    }
    // return this.md.render(this.state.value)
    // return this.state.value.split("").reverse().join("")
  }

  handleChange(event) {
    this.setState({
      value: event.target.value
    })
    console.log(this.state.value)
  }

  render() {
    const { value } = this.state

    return <>
      <h1>MarkdownEditor</h1>
      <label htmlFor="editor">Enter some markdown</label>
      <br/>
      <textarea
        id="editor"
        defaultValue={value}
        onChange={
          (event) => {
            this.handleChange(event)
          }
        }
      />
      <hr/>
      <h4>Output</h4>
      <div
        style={ {border: "1px solid #000", height: "100px"} }
        dangerouslySetInnerHTML={this.getRawMarkup()}
      >
        {/*{ this.getRawMarkup() }*/}
      </div>
    </>
  }
}

export default MarkdownEditor
